<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#table{
				margin: auto;
			}
			td {
				background-color: #9A9A9A;
			}
			
			.td1 {
				background-color: #FFFFFF;
			}
			
			#show {
				margin: auto;
				border: 1px solid aqua;
				height: 100px;
				width: 300px;
				line-height: 100px;
				font-size: 40px;
				font-weight: bold;
				text-align: center;
				color: coral;
				background-color: #00FFFF;
				font-family: "微软雅黑";
				display: none;
			}
		</style>
	</head>

	<body>
		<table id="table" height="300" width="300" border="1" cellspacing="0" cellpadding="0">
			<tbody>

			</tbody>
		</table>
		<div id="show">恭喜过关</div>
		<script type="text/javascript">
			var table = document.getElementById("table");
			var num = 3
			var tds;
			creatTable();

			function creatTable() {
				table.innerHTML = "";
				for(var i = 0; i < num; i++) {
					var row = table.insertRow();
					for(var k = 0; k < num; k++) {
						row.insertCell();
					}
					tds = table.getElementsByTagName("td");
				}
				for(var i = 0; i < tds.length; i++) {
					tds[i].onclick = function() {
						var rowindex = this.parentNode.rowIndex;
						var cellindex = this.cellIndex;
						for(var i = 0; i < tds.length; i++) {
							if(tds[i].parentNode.rowIndex == rowindex || tds[i].cellIndex == cellindex) {
								if(tds[i].className) {
									tds[i].className = "";
								} else {
									tds[i].className = "td1";
								}
							}
						}
						getFullTable();
					}
				}
			}

			function getFullTable() {
				var ischenggong = true;
				for(var i = 0; i < tds.length; i++) {
					if(tds[i].className == "") {
						ischenggong = false;
						break;
					}
				}
				if(ischenggong) {
					document.getElementById("show").style.display = "block";
					setTimeout(function() {
						num++;
						creatTable();
						document.getElementById("show").style.display = "none";
					}, 2000)
				}
			}
		</script>
	</body>

</html>